
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <table>
            <tbody></tbody>
        </table>
        <!-- 使用一个计时器来中断一个长时间运行的任务 -->
        <script>
        // 创建24w个DOM节点 20000行 每行6列的表格
        const rowCount = 20000;
        const divideInto = 4;
        // 切成4次 一次6w
        const chunkSize = rowCount / divideInto;
        // 重复次数
        let iteration = 0;
        const table = document.getElementsByTagName("tbody")[0];
        setTimeout(function generateRows() {
            // 计算上一次离开的时间 也就是到第几次了 
            const base = chunkSize * iteration;
            for(let i = 0;i < chunkSize;i++){
                const tr = document.createElement("tr");
                for(let t = 0;t < 6;t++){
                    const td = document.createElement("td");
                    td.appendChild(document.createTextNode((i + base) + "," + t + "," + iteration));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
            // 增加次数
            iteration++;
            // 小于总次数就递归继续设置新的计时器 0代表着尽快 但还是需要等待页面重新渲染
            if(iteration < divideInto){
                setTimeout(generateRows,0);
            }
        },0);

        </script>
    </body>

    </html>
